package pers.jing.android.helper.page

import androidhelper.composeapp.generated.resources.Res
import androidhelper.composeapp.generated.resources.back
import androidhelper.composeapp.generated.resources.device
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.rounded.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import org.jetbrains.compose.resources.stringResource
import org.koin.compose.viewmodel.koinViewModel
import pers.jing.android.helper.widget.Spinner
import pers.jing.android.helper.widget.normalAppBarColors

/**
 * 设备页面
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DevicePage(serialId: String, viewModel: DeviceViewModel = koinViewModel<DeviceViewModel>(),
               onClickBack: () -> Unit) {
    viewModel.setCurDeviceIndex(serialId)
    val curDeviceIndex = viewModel.curDeviceIndex
    Scaffold (
        topBar = {
            TopAppBar(
                title = {
                    Spinner(
                        name = stringResource(Res.string.device),
                        placeHolder = "",
                        data = viewModel.deviceNameList,
                        selectedIndex = curDeviceIndex.value,
                        modifier = Modifier.width(200.dp)
                    ) { index, text ->
                        viewModel.setCurDeviceIndex(index)
                    }
                },
                navigationIcon = {
                    IconButton(
                        onClick = {
                            onClickBack()
                        }
                    ) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
                            contentDescription = stringResource(Res.string.back)
                        )
                    }
                },
                colors = TopAppBarDefaults.normalAppBarColors()
            )
        }
    ) { paddings ->
        Row(
            modifier = Modifier.padding(paddings)
        ) {
            //左侧, 功能列表
            val navController = rememberNavController()
            var pageId by remember {
                mutableStateOf("deviceScreen")
            }
            Column(
                modifier = Modifier.fillMaxHeight().width(60.dp)
                    .background(MaterialTheme.colorScheme.surfaceContainer),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                TextButton(onClick = {
                    pageId = "deviceScreen"
                    navController.navigate(pageId)
                }) {
                    Text(
                        text = "屏幕",
                        color = if (pageId == "deviceScreen") {
                            MaterialTheme.colorScheme.primary
                        } else {
                            MaterialTheme.colorScheme.onSecondaryContainer
                        }
                    )
                }

                TextButton(onClick = {
                    pageId = "pkgList"
                    navController.navigate(pageId)
                }) {
                    Text(
                        text = "应用",
                        color = if (pageId == "pkgList") {
                            MaterialTheme.colorScheme.primary
                        } else {
                            MaterialTheme.colorScheme.onSecondaryContainer
                        }
                    )
                }

//                TextButton(onClick = {
//                    pageId = "taskList"
//                    navController.navigate(pageId)
//                }) {
//                    Text(
//                        text = "任务",
//                        color = if (pageId == "taskList") {
//                            MaterialTheme.colorScheme.primary
//                        } else {
//                            MaterialTheme.colorScheme.onSecondaryContainer
//                        }
//                    )
//                }

                Spacer(
                    modifier = Modifier.weight(1.0f)
                )
            }
            //右侧, 功能对应的内容
            Column(
                modifier = Modifier.fillMaxHeight().weight(1.0f)
            ){
                NavHost(navController, startDestination = pageId) {
                    composable("deviceScreen") {
                        DeviceScreenPage()
                    }
                    composable("pkgList") {
                        PkgListPage(viewModel)
                    }
//                    composable("taskList") {
//                        TaskListPage(viewModel)
//                    }
                }
            }

        }
    }

}